<template>
	<view class="container">
		<view class="nav" :style="'height:'+TitleHeight+'px;'">
			<view class="menu" :style="'opacity:'+Opacity"></view>
			<view class="title" :style="'bottom:'+TitleBottom+'px'">我的</view>
		</view>		
		<view class="vip">
			<view class="vipbg">
				<view class="avatar">
					<view class="headimg" @click="Tools.PrevImg([User.HeadImg],0)"><image :src="User.HeadImg==''?'https://yuehuiba.qiyedaishu.com/img/headimg.png':Tools.GetImg(User.HeadImg,200)" mode="aspectFill"/></view>
					<view class="isidentify" v-if="User.IsIdentify==1"><image src="https://yuehuiba.qiyedaishu.com/img/isidentify.png?v=1"/></view>
				</view>
				<view class="account">
					<view class="login" @click="Login()" v-if="User.ID==0">登录</view>
					<view class="realname" v-if="User.ID>0">{{User.NickName}}<font> ID：{{User.ID}}</font></view>
					<view class="cardnum" v-if="User.ID>0" @click="MySign()">{{User.Signature==""?"签名：":""}}{{User.Signature.Cut(37)}}<image src="/static/sign.png"></view>
				</view>
			</view>
			<view class="btnlist" v-if="User.Role==0 || User.Role==2">
				<view class="btn" style="width:33.3%;" @click="StoreList(1)"><view class="icon">{{StoreCount}}</view><view class="name">关注</view></view>
				<view class="btn" style="width:33.3%;" @click="StoreList(2)"><view class="icon">{{FunsCount}}</view><view class="name">粉丝</view></view>
				<view class="btn" style="width:33.3%;" @click="ScoreList()"><view class="icon">{{User.CreditScore}}</view><view class="name">信用值</view></view>
			</view>
			<view class="btnlist" v-if="User.Role==1">
				<view class="btn" style="width:33.3%;" @click="ToFit(1)"><view class="icon">{{FitCount}}</view><view class="name">匹配成功</view></view>
				<view class="btn" style="width:33.3%;" @click="ToFit(3)"><view class="icon">{{WaitSeeCount}}</view><view class="name">待见面</view></view>
				<view class="btn" style="width:33.3%;" @click="ToFit(4)"><view class="icon">{{HadSeeCount}}</view><view class="name">已见面</view></view>
			</view>
		</view>
		<view class="hongniang" @click="Apply" v-if="User.Role==1 && (User.State==1 || User.State==3)">
			<view class="left">
				<view class="title">成为红娘</view>
				<view class="btn" v-if="User.State==1">申请中</view>
				<view class="btn" v-if="User.State==3">申请失败</view>
			</view>
			<view class="right"><image src="https://yuehuiba.qiyedaishu.com/img/enai.png"/></view>
		</view>
		<view class="menus">
			<template v-if="User.Role==0 || User.Role==2">
				<view class="line border-b" @click="MyYueHui"><view class="icon"><image src="/static/wodeyuehui.png"/></view><view class="name">我的约会</view></view>
				<view class="line border-b" @click="MySign"><view class="icon"><image src="/static/mysign.png"/></view><view class="name">我的签名</view></view>
				<view class="line border-b" @click="UserInfo"><view class="icon"><image src="/static/wanshanziliao.png"/></view><view class="name">我的资料</view></view>
				<view class="line border-b" @click="Identify"><view class="icon"><image src="/static/shimingrenzheng.png"/></view><view class="name">实名认证</view><view class="tip red" v-if="User.IsIdentify==0">（未认证）</view><view class="tip green" v-if="User.IsIdentify==1">（已认证）</view></view>
				<view class="line border-b" @click="MyMatcher"><view class="icon"><image src="/static/wodehongniang.png"/></view><view class="name">我的红娘</view></view>
				<view class="line border-b" @click="MySpread"><view class="icon"><image src="/static/wodetuiguang.png"/></view><view class="name">我的分享</view></view>
				<view class="line border-b" @click="MyScore"><view class="icon"><image src="/static/score.png"/></view><view class="name">我的积分</view></view>
				<view class="line border-b" @click="VisitRecord"><view class="icon"><image src="/static/liulanjilu.png"/></view><view class="name">浏览记录</view></view>
				<view class="line border-b"><button open-type="contact"><view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/kefu.png"/></view><view class="name">联系客服</view></button></view>
				<view class="line border-b" @click="MyActive"><view class="icon"><image src="/static/huodong.png"/></view><view class="name">我参加的活动</view></view>
				<view class="line border-b" @click="PushCount"><view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/pushcount.png"/></view><view class="name">剩余推送次数（{{User.PushCount}}）</view></view>
				<view class="line border-b" @click="Destroy"><view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/destroy.png"/></view><view class="name">注销账号</view></view>
			</template>
			<template v-if="User.Role==1 && User.State==2">
				<view class="line border-b" @click="MyOrder" ><view class="icon"><image src="/static/wodeyuehui.png"/></view><view class="name">我的服务单</view></view>
				<view class="line border-b" @click="MatcherInfo"><view class="icon"><image src="/static/wanshanziliao.png"/></view><view class="name">我的资料</view></view>
				<view class="line border-b" @click="Identify"><view class="icon"><image src="/static/shimingrenzheng.png"/></view><view class="name">实名认证</view><view class="tip red" v-if="User.IsIdentify==0">（未认证）</view><view class="tip green" v-if="User.IsIdentify==1">（已认证）</view></view>
				<view class="line border-b" @click="MyUser"><view class="icon"><image src="/static/wodeyonghu.png"/></view><view class="name">我的用户</view></view>
				<view class="line border-b" @click="MySpread"><view class="icon"><image src="/static/wodetuiguang.png"/></view><view class="name">我的分享</view></view>
				<view class="line border-b" @click="MyScore"><view class="icon"><image src="/static/score.png"/></view><view class="name">我的积分</view></view>
				<view class="line border-b" @click="VisitRecord"><view class="icon"><image src="/static/liulanjilu.png"/></view><view class="name">浏览记录</view></view>
				<view class="line border-b"><button open-type="contact"><view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/kefu.png?v=1"/></view><view class="name">联系客服</view></button></view>
				<view class="line border-b" @click="MyActive"><view class="icon"><image src="/static/huodong.png"/></view><view class="name">我参加的活动</view></view>
				<view class="line" @click="PushCount"><view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/pushcount.png"/></view><view class="name">剩余推送次数（{{User.PushCount}}）</view></view>
			</template>
		</view>
		<view class="menus">
			<view v-if="User.ShowActive==1" class="line border-b" @click="ActiveList"><view class="icon"><image src="/static/huodong.png"/></view><view class="name">活动管理</view></view>
			<view v-if="User.ShowRoom==1" class="line border-b" @click="RoomList" ><view class="icon"><image src="/static/xiangqinjiao.png"/></view><view class="name">相亲角管理</view></view>
			
		</view>
		<view class="checkbook" @click="Exit()" v-if="User.ID>0">退出登录</view>
		<view class="version">v{{Versions}}</view>
		<view class="haibao" v-if="ShowDialog">
			<view class="meng"></view>
			<view class="img"><image :src="HaiBao" @click="PrevImg([HaiBao], 0)"/></view>
			<view class="savephoto" @click="SavePhoto()">保存到相册</view>
			<view class="close"><image src="/static/close.png" @click="CloseDialog"/></view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Title,
		      path: "pages/index/index?scene="+UserID //这是一个路径
			  //imageUrl: "https://motiandarenku.qiyedaishu.com/img/appshare.png?v=1"
		    }
		},
		data() {
			return {
				Title:'',
				HaiBao:'',
				ShareTitle:'',
				ShareContext:'',
				ShowDialog:false,
				User:{ID:0,HeadImg:'',Role:0,CreditScore:0, PushCount:0},
				StoreCount:0,
				FunsCount:0,
				FitCount:0,
				WaitSeeCount:0,
				HadSeeCount:0,
				Opacity:0,
				TitleHeight: 0,
				TitleBottom: 0,
				Versions:''
			}
		},
		onPullDownRefresh() {
			this.Find_MyData();
		},
		onPageScroll(res) {
			this.Opacity=res.scrollTop/100;
		},
		onShow() {
			this.Find_MyData();
			this.Util.MatcherIsIdentify();
		},
		onLoad() {
			var menu = this.Util.GetMenuHeight();
			this.TitleHeight = menu.height;
			this.TitleBottom = menu.bottom;
			this.Versions=this.Version;
		},
		methods:{
			ToShare(){ 
				this.Util.Loading("请稍候...");
				setTimeout(()=>{
					this.Util.HideLoading();
				},1000);				
			},
			ToFit(State){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/fitlist?State="+State
				})
			},
			StoreList(Flag){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/storelist?Flag="+Flag
				})
			},
			ScoreList(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/creditscorelist"
				})
			},
			MyYueHui(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/orderlist" 
				})
			},
			MySign(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/sign"
				})
			},
			MyScore(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/score/scorelist"
				})
			},
			MyActive(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/myactive"
				})
			},
			MyOrder(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/fitlist"
				})
			},
			VisitRecord(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/visitrecordlist"
				})
			},
			ActiveList(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/admin/active/activelist"
				})
			},
			RoomList(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/admin/room/roomlist"
				})
			},
			UserInfo(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/login/userinfo"
				})
			},
			MatcherInfo(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/login/matcherinfo"
				})
			},
			Identify(){
				this.Util.AddPushCount();
				if(this.User.Role==0 || this.User.Role==2){
					this.Util.navigateTo({
						url:"/pages/index/identify"
					})
				}else{
					this.Util.navigateTo({
						url:"/pages/index/identify_matcher"
					})
				}
			},
			MyMatcher(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/pages/my/mymatcher"
				})
			},
			MyUser(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/myuserlist"
				})
			},
			MySpread(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/subpackages/my/spreadlist"
				})
			},
			Apply(){
				this.Util.AddPushCount();
				this.Util.navigateTo({
					url:"/pages/matcher/matcherapply?Flag=update"
				})
			},
			PushCount(){
				this.Util.AddPushCount();
				this.Util.navigateTo({ 
					url:"/subpackages/my/pushcount?PushCount="+this.User.PushCount
				})
			},
			Destroy(){
				this.Util.navigateTo({
					url:"/subpackages/my/destroy"
				})
			},
			ShowHaiBao(){
				var data = {};
				data.Act="Find_HaiBao";
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					this.HaiBao=json.Data.HaiBao;
					this.ShowDialog=true;
				});				
			},
			CloseDialog(){
				this.ShowDialog=false;
			},
			Login(){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			Find_MyData(){
				var data = {};
				data.Act="Find_MyData";
				if(this.User.ID==0){
					this.Util.Loading("请稍候...");
				}
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					if(json.State){						
						this.Title=json.Data.Title;
						this.User = json.Data.User;
						this.HaiBao=json.Data.HaiBao;
						this.ShareTitle=json.Data.ShareTitle;
						this.ShareContext=json.Data.ShareContext;
						this.StoreCount = json.Data.StoreCount;
						this.FunsCount= json.Data.FunsCount;
						this.FitCount= json.Data.FitCount;
						this.WaitSeeCount= json.Data.WaitSeeCount;
						this.HadSeeCount= json.Data.HadSeeCount;
						uni.setStorageSync("OpenID", json.Data.User.OpenID);
						uni.setStorageSync("Token", json.Data.User.Token);
						uni.setStorageSync("UserID", json.Data.User.ID);
						uni.setStorageSync("Role", json.Data.User.Role);
						uni.setStorageSync("IsIdentify", json.Data.User.IsIdentify);
						uni.setStorageSync("IsAdmin", json.Data.User.IsAdmin);
					}else{
						this.User={ID:0,HeadImg:'',Role:0,CreditScore:0, PushCount:0};
						this.StoreCount=0;
						this.FunsCount=0;
					}
				});
			},
			Exit(){
				this.Util.AddPushCount();
				this.Util.Confirm("您确定要退出账号吗？",()=>{
					uni.setStorageSync("Token","");
					uni.setStorageSync("OpenID", "");
					uni.setStorageSync("UserID", "");
					uni.setStorageSync("Role", "");
					uni.setStorageSync("IsIdentify", "");
					uni.setStorageSync("IsAdmin", "");
					uni.$emit("Clear_BookBox");
					this.User={ID:0,HeadImg:'',Role:0,CreditScore:0, PushCount:0};
					this.Util.Toast("退出成功，请重新登录",function(){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					});
				});
			},
			PrevImg(urls,index){
				this.Util.AddPushCount();
				uni.previewImage({
					current:index,
					urls: urls,
					longPressActions: {
						itemList: ['保存图片'],
						success: data=> {
							uni.saveImageToPhotosAlbum({
								filePath: urls[data.index],
								success: d=> {
									this.Util.Toast("已保存至系统相册");
								}
							});
						}
					}
				});
			},
			SavePhoto(){
				this.Util.Loading("保存中...");
				uni.downloadFile({
					url: this.HaiBao, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
							  filePath: res.tempFilePath,
							  success: item=> {
								this.Util.HideLoading();
								this.Util.Success("已保存至相册");
							  },fail(res) {
									console.log(res);
								}
							})
						}
					},fail(res) {
						console.log(res);
					}
				});	
			}
		}
	}
</script>

<style lang="scss">
	page{background-image: url(https://yuehuiba.qiyedaishu.com/img/bg5.png); background-size: 100%; background-repeat: no-repeat;}
	.container{width:100%; padding-bottom: 20rpx;
		.vip{width:710rpx; height:350rpx; margin-left:20rpx; margin-top:150rpx;
			.vipbg{width:720rpx; height:auto; margin-left:0rpx; padding:20rpx; padding-top:30rpx; padding-bottom:10rpx; display:flex; flex-direction: row;
				.avatar{width:100rpx; height:100rpx; position: relative;
					.headimg{width:100rpx; height:100rpx; border:2rpx solid #ffffff; border-radius:50rpx; overflow: hidden; image{width:98rpx; height:98rpx;}}
					.isidentify{position: absolute; right:-4rpx; bottom:-8rpx; z-index: 99; image{width:28rpx; height:28rpx;}}
				}
				.account{flex:1; height:auto; min-height: 106rpx; padding-left:20rpx; padding-top:2rpx; color:#ffffff;
					.realname{width:auto; height:45rpx; font-size:34rpx; font-weight: bold; font{font-size:30rpx; padding-left:20rpx; font-weight: lighter;}}
					.cardnum{position: relative; z-index:1;  width:560rpx; max-height:70rpx; line-height: 35rpx; font-size:28rpx; margin-top:8rpx; color:#f3f3f3; overflow: hidden; word-break: break-all; word-wrap: break-word;
						image{width:32rpx; height:32rpx; vertical-align: middle;}						
					}

					.login{width:90rpx; height:60rpx; line-height: 60rpx; margin-top:15rpx; margin-left:10rpx; border-radius:10rpx; background-color: #48c872; text-align:center; color:#ffffff;}
				}
				.userinfo{width:auto; height:150rpx; display:flex; flex-direction: column; align-items: flex-end;
					.usertype{margin-top:-10rpx; margin-bottom: 5rpx; 
						.usergrade{max-width:300rpx; height:50rpx; line-height: 50rpx; overflow: hidden; padding-left:8rpx; padding-right:8rpx; float:right; font-size:29rpx; text-align: center; color:#bb7848; background:linear-gradient(to right,#ffd89d,#f5c485);}
					}
					.userdate{width:auto; height:24rpx; float:right; line-height: 24rpx; font-family: "微软雅黑", Arial; font-size:27rpx; margin-top:10rpx; color:#ab5d26; text-align:justify;}
				}
			}
			.btnlist{width:100%; height:180rpx; padding-left:40rpx; padding-right:40rpx; padding-top:40rpx; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-around; border-radius: 20rpx; 
				.btn{height:180rpx;
					.icon{width:100%; height:60rpx; text-align: center; font-size:38rpx; font-weight: bold;}
					.name{width:100%; height:40rpx; text-align: center; font-size:32rpx; color:#636363;}
				}
			}
		}
		.hongniang{width:710rpx; margin-left:20rpx; height:160rpx; border-radius:20rpx; background-color:#ffffff; overflow: hidden; background-image: url(/static/arrow.png); background-size: 36rpx 36rpx; background-position: right 30rpx center; background-repeat: no-repeat;
			.left{width:160rpx; height:160rpx; float:left; padding-left:40rpx; .title{width:160rpx; float:left; margin-top:25rpx; font-size:38rpx; text-align: center; font-weight: bold;} .btn{width:160rpx; height:50rpx; line-height: 50rpx; margin-top:10rpx; font-size:28rpx; text-align: center; border-radius: 30rpx; float:left; background-color: #c94c36; color:#ffffff; }}
			.right{width:140rpx;height:160rpx; float:left; margin-left:200rpx; image{width:140rpx; height: 140rpx; margin-top:10rpx;}}
		}
		.hongniang:active{background-color: #e3e3e3;}
		.menus{width:710rpx; margin-left:20rpx; height:auto; margin-top:10rpx; border-radius:20rpx; margin-bottom:20rpx; overflow: hidden;
			.line{width:100%; height:90rpx; display: flex; background-color: #ffffff; flex-direction: row; padding-right: 20rpx; background-image: url(/static/arrow.png); background-size: 32rpx 32rpx; background-position: right 30rpx center; background-repeat: no-repeat;
				.icon{width:50rpx; height:50rpx; margin-top:21rpx; margin-left:30rpx; margin-right: 20rpx;
					image{width:50rpx; height:50rpx; border-radius: 25rpx;}
				}
				.name{flex:1; height:90rpx; line-height: 90rpx; color:#636363; font-size:34rpx; text-align: left; }
				.tip{width:auto; height:90rpx; line-height: 90rpx; font-size:28rpx; padding-right: 50rpx;}
				button{width:100%; height:unset; border:0rpx; line-height: unset; padding:0rpx !important; background-color: unset; display: flex; flex-direction: row;}
				button:after{border:0rpx; height:unset;}
			}
			.line:active{background-color: #f6f6f6;} 
		}
		.checkbook{ width:710rpx; margin-left:20rpx; margin-top:60rpx; margin-bottom: 20rpx; height:90rpx; line-height: 90rpx; border-radius:45rpx;  background-color: #d13c13; color:#ffffff; text-align: center; font-size:36rpx;}
		.version{width:100%; text-align: center; font-size:26rpx; color:#cccccc;} 
		.haibao{position: fixed; width:100vw; height:100vh; top:0rpx; left:0rpx;
			.meng{width:100vw; height:100vh; background-color: #000000; opacity: 0.7; position: fixed; top:0rpx; left:0rpx;}
			.img{width:calc(100vw - 40rpx); height:calc(100vh - 200rpx); position: absolute; top:20rpx; left:20rpx;
				image{width:100%; height:100%;}
			}
			.savephoto{position: absolute; width:710rpx; height:80rpx; line-height: 80rpx; background-color: #149c40; color:#ffffff; text-align:center; bottom:85rpx; left:20rpx; border-radius: 10rpx;}
			.close{position: absolute; width:100vw; text-align:center; bottom:10rpx; left:0rpx;
				image{width:60rpx; height:60rpx;}
			}
		}
	}
</style>
